一直以來都是用 bland.php 做使用者介面操作，今天要來正式做前端改用框架與後端橋接的流程，以下是相關的流程重點並記錄實作過程。
resources/js 目錄下建立 Vue 元件、Vue Router 設定檔和初始化 Vue 應用。@vite 指令引入建置後的 Vue 應用程式。npm run dev 啟動 Vite 開發伺服器。參考文章：魔法編譯器 - vite
使用 Vite 安裝 vue.js
npm install --save-dev vite @vitejs/plugin-vue
npm install vue@next vue-router@next
建立 Vite 設定檔 vite.config.js 在專案根目錄下：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/': 'http://localhost', // 用於代理 API 請求
},
},
});
resources/js 文件建立 Vue 元件
在 resources/js 目錄下建立 Vue 元件檔。
例如，建立 HelloWorld.vue、Home.vue 和 About.vue 檔案。
<template>
<div>
<h1>Hello, {{ name }}!</h1>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
name: {
type: String,
default: 'Vue'
}
});
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
配置 Vue Router
在 resources/js 目錄下建立 Vue Router 設定檔 resources/js/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
初始化 Vue 應用
在 resources/js 目錄下建立一個入口檔案 resources/js/app.js 初始化 Vue 應用：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
建立主 Vue 元件
在 resources/js 目錄下建立一個主 Vue 元件檔 resources/js/App.vue：
<template>
<router-view></router-view>
</template>
在 resources/views 目錄下建立一個 Blade 文件 resources/views/app.blade.php，用於掛載 Vue 應用
<!DOCTYPE html>
<html>
<head>
<title>Laravel with Vue 3 and Vite</title>
@vite('resources/js/app.js')
</head>
<body>
<div id="app"></div>
</body>
</html>
在 routes/web.php 文件中加入一個路由來顯示 Blade 模板
Route::get('/', function () {
return view('app');
});
執行 npm run dev 命令啟動 Vite 開發伺服器
iThome鐵人賽
看影片追技術